<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增医废 报模版 配置')"/>
    <!--<link rel="stylesheet" th:href="@{/ajax/libs/editor/jsoneditor/jsoneditor.css}"/>-->
    <style>
        #editor {
            position: absolute;
            width: 100%;
            height: 400px;
            border: 1px solid #dfd6d6;
        }
    </style>
</head>
<body class="white-bg">


<div id="editor"></div>


<th:block th:include="include :: footer"/>
<!--<script th:src="@{/ajax/libs/ace/ace.js}" type="text/javascript" charset="utf-8"></script>-->
<script th:src="@{/ajax/libs/editor/ace/ace.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/ajax/libs/editor/ace/ext-language_tools.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/ajax/libs/editor/ace/theme-twilight.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var prefix = ctx + "yf/reports"


    var jsonDoc = [{"field": 'id', "title": 'ID', "width": 80, "fixed": 'left', "totalRowText": '合计：'}]
    //自动补全
    var languageTools = ace.require("ace/ext/language_tools");
    languageTools.addCompleter({
        getCompletions: function (editor, session, pos, prefix, callback) {
            callback(null, [
                {
                    name: "标题",
                    value: '"title":"",',
                    caption: "title",
                    meta: "标题",
                    type: "String",
                    score: 1000 // 让test排在最上面
                },
                {
                    name: "id",
                    value: '"field":"",',
                    caption: "field",
                    meta: "id",
                    type: "String",
                    score: 1000 // 让test排在最上面
                },
                {
                    name: "合计",
                    value: '"totalRowText":"合计：",',
                    caption: "totalRowText",
                    meta: "合计",
                    type: "String",
                    score: 1000 // 让test排在最上面
                },
                {
                    name: "合计类型",
                    value: '"totalRowType":"int",',
                    caption: "totalRowType",
                    meta: "合计类型",
                    type: "String",
                    score: 1000 // 让test排在最上面
                },
                {
                    name: "居中",
                    value: '"align":"center",',
                    caption: "align",
                    meta: "居中",
                    type: "String",
                    score: 1000 // 让test排在最上面
                },
                {
                    name: "单元格横跨行数",
                    value: '"rowspan":,',
                    caption: "rowspan",
                    meta: "单元格横跨行数",
                    type: "String",
                    score: 1000 // 让test排在最上面
                },
                {
                    name: "单元格横跨的列数",
                    value: '"colspan":,',
                    caption: "colspan",
                    meta: "单元格横跨的列数",
                    type: "String",
                    score: 1000 // 让test排在最上面
                }
            ]);
        }
    });


    var editor = ace.edit("editor");
    editor.$blockScrolling = Infinity;
    editor.setFontSize(16);
    editor.session.setMode("ace/mode/json");
    editor.setTheme("ace/theme/crimson_editor");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
    });


    //语法错误验证
    function hasEditorError() {
        var annotations = editor.getSession().getAnnotations();
        for (var aid = 0, alen = annotations.length; aid < alen; ++aid) {
            if (annotations[aid].type === 'error') {
                return true;
            }
        }
        return false;
    }

    // 编辑器上的内容改变时触发
    editor.on('change', function () {
        console.log(!hasEditorError())
    });


    formattingJson(jsonDoc)

    //格式化json
    function formattingJson(jsonDoc) {
        // 首行缩进
        editor.getSession().setTabSize(2);
        editor.getSession().setUseWrapMode(true);
        //格式化json 并设置初始值
        editor.setValue( JSON.stringify(jsonDoc, null, '\t') );
        editor.moveCursorTo(0, 0);
    }

    function getValue() {
        editor.getValue();
    }


</script>
</body>
</html>